<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>
<div id="app">
    <button @click="isShow=!isShow">{{isShow ? '隐藏' : '显示'}}</button>
    <common-head v-if="isShow"></common-head>
</div>
<script src="./vue.js"></script>
<script>
    const CommonHead = {
        template: `
          <div>
          <h2>这是一个公共头部</h2>
          <button @click="msg='值改变了'">改变数据</button>
          {{ msg }}
          </div>
        `,
        data() {
            return {
                msg: '你好组件'
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('组件实例化完成-created');
        },
        beforeMount() {
            console.log('组件初始化虚拟dom完成-beforeMount');
        },
        mounted() {
            console.log('组件初始化真实dom构建完成-mounted');
        },
        beforeUpdate() {
            console.log('更新之前-beforeUpdate');
        },
        updated() {
            console.log('更新完成-update');
        },
        beforeDestroy() {
            console.log('组件卸载之前-beforeDestroy');
        },
        destroyed() {
            console.log('组件卸载完成-destroyed');
        },
    }
    Vue.component('CommonHead', CommonHead);
    const vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>
</body>
</html>